import { Card, Breadcrumb, Form, Button, Radio, Input, Upload, Space, Select, message } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Link, useNavigate, useSearchParams } from 'react-router-dom'
import './index.scss'

import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { useEffect, useState } from 'react'
import { createArticleAPI, getArticleByIdAPI, updateArticleAPI } from "@/apis/article"
import { useChannel } from '@/hooks/useChannel'
const { Option } = Select

const Publish = () => {
    const navigate = useNavigate()
    const { channelList } = useChannel()
    // 提交表单
    const onFinish = async (formValue) => {
        console.log(formValue)
        // 校验封面类型imageType是否和实际的图片列表imageLis数量是相等的
        if (imageList.length !== imageType) {
            return message.error('封面数量和类型数量不一致')
        }
        const { title, content, channel_id } = formValue
        // 按照接口文档的格斯处理收集到的表单数据
        const reqData = {
            title,
            content,
            cover: {
                type: imageType, // 封面类型
                images: imageList.map(item => {
                    return item.url || item.response.data.url
                }) // 图片列表
            },
            channel_id
        }
        // 调用接口提交
        // 处理调用不同的接口，新增-新增接口，编辑-更新接口
        if (articleId) {
            await updateArticleAPI({ ...reqData, id: articleId })
        } else {
            await createArticleAPI(reqData)
        }
        navigate("/article")
    }

    // 图片上传回调
    const [imageList, setImageList] = useState([])
    const onChange = (value) => {
        setImageList(value.fileList)
    }

    // 选择封面图片类型
    const [imageType, setImageType] = useState(0)
    const onTypeChange = (e) => {
        setImageType(e.target.value)
    }
    // 回填数据
    const [searchParams] = useSearchParams()
    const articleId = searchParams.get("articleId")
    // 获取Form实例
    const [form] = Form.useForm()
    useEffect(() => {
        // 1.通过id获取获取数据
        async function getArticleInfo() {
            const res = await getArticleByIdAPI(articleId)
            // 2.调用实例方法，完成回填
            form.setFieldsValue({
                ...res.data,
                type: res.data.cover.type,
                imageList: res.data.cover.images
            })
            // 3.回填图片数据
            setImageType(res.data.cover.type)
            setImageList(res.data.cover.images.map(item => ({ url: item })))
        }
        if (articleId) {
            getArticleInfo()
        }
    }, [articleId])
    return (
        <div className="publish">
            <Card title={<Breadcrumb separator=">" items={[
                { title: <Link to="/">首页</Link> },
                { title: `${articleId ? "编辑" : "发布"}文章` }
            ]} />}>
                <Form labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} initialValues={{ type: 0 }} onFinish={onFinish} form={form}>
                    <Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入文章标题' }]} >
                        <Input placeholder="请输入文章标题" style={{ width: 400 }} />
                    </Form.Item>
                    <Form.Item label="频道" name="channel_id" rules={[{ required: true, message: '请选择文章频道' }]}    >
                        <Select placeholder="请选择文章频道" style={{ width: 400 }}>
                            {channelList.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}
                        </Select>
                    </Form.Item>

                    <Form.Item label="封面">
                        <Form.Item name="type">
                            <Radio.Group onChange={onTypeChange}>
                                <Radio value={1}>单图</Radio>
                                <Radio value={3}>三图</Radio>
                                <Radio value={0}>无图</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {
                            imageType > 0 && <Upload name="image" listType="picture-card" maxCount={imageType} className="avatar-uploader" showUploadList
                                action={"http://geek.itheima.net/v1_0/upload"} fileList={imageList} onChange={onChange}  >
                                <div style={{ marginTop: 8 }}>
                                    <PlusOutlined />
                                </div>
                            </Upload>
                        }

                    </Form.Item>
                    <Form.Item label="内容" name="content" rules={[{ required: true, message: '请输入文章内容' }]}    >
                        <ReactQuill className='publish-quill' theme="snow" placeholder='请输入文章内容' />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 4 }}>
                        <Space>
                            <Button size="large" type="primary" htmlType="submit">
                                发布文章
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Publish